/**
 * Google Maps API v3 must be loaded before this
 */
google.maps.event.addDomListener(window, "load", function() {
    var opts1 = {
        center: new google.maps.LatLng(51, 10),
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var opts2 = {
        center: new google.maps.LatLng(51, 10),
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.SATELLITE
    };

    // for popup, save the node
    var map1 = new google.maps.Map(document.getElementById("map-1"), opts1);
    var map2 = new google.maps.Map(document.getElementById("map-2"), opts2);

    var pc1 = new PopoutControl(map1);
    var pc2 = new PopoutControl(map2);

    var log1 = document.getElementById("log-1");
    var log2 = document.getElementById("log-2");

    map1.controls[google.maps.ControlPosition.TOP_RIGHT].push( pc1.getDiv() );
    map2.controls[google.maps.ControlPosition.TOP_LEFT].push( pc2.getDiv() );

    google.maps.event.addListener(pc1, "popout", function(wOther){
        log1.innerHTML += (new Date()) + " " + wOther.name + " opened...<br />";
    });
    google.maps.event.addListener(pc1, "popin", function(){
        log1.innerHTML += (new Date()) + " " + "Popout closed...<br />";
    });

    google.maps.event.addListener(pc2, "popout", function(wOther){
        log2.innerHTML += (new Date()) + " " + wOther.name + " opened...<br />";
    });
    google.maps.event.addListener(pc2, "popin", function(){
        log2.innerHTML += (new Date()) + " " + "Popout closed...<br />";
    });

    // setup DOM buttons to pop in & out as well
    var toggle1 = document.getElementById("toggle-1");
    google.maps.event.addDomListener(toggle1, "click", pc1.toggle);
    var toggle2 = document.getElementById("toggle-2");
    google.maps.event.addDomListener(toggle2, "click", pc2.toggle);
    // setup DOM buttons to clear logs
    var clear1 = document.getElementById("clear-1");
    google.maps.event.addDomListener(clear1, "click", function(){
        log1.innerHTML = "";
    });
    var clear2 = document.getElementById("clear-2");
    google.maps.event.addDomListener(clear2, "click", function(){
        log2.innerHTML = "";
    });
});
